<template>
  <div id="app">
      <props-and-data :name="name" :info="info" :list="list"></props-and-data>

      <button @click="handleNameChange">修改字符串name</button>
      <button @click="hanleInfoChange">修改对象info</button>
      <button @click="handleListChange">修改数组list</button>
  </div>
</template>

<script>
import PropsAndData from './components/PropsAndData.vue'
let name = 'Hello';
export default {
  name: 'App',
  components: {
    PropsAndData
  },
  data() {
    this.name = name;
    return {
      // 对象的属性不是响应式的
      info: {},
      // 如果想要对象的属性是响应式的就必须定义出来
      // info: {
      //   age: undefined
      // },
      list: []
    }
  },
  methods: {
    // 修改字符串字段name 
    handleNameChange() { 
      this.name = "HelloNameChange" + new Date()
      // 为什么name不能触发子组件的更新？因为name是在data外声明的 不是响应式的 因此不能触发子组件的更新
      console.log(this.name+'this.name发生了改变 但是没有触发页面子组件的更新'); 
    },
    // 修改对象属性
    hanleInfoChange() {
      this.info.age = 20;
      // 因为响应式只存在于info上 并不存在与age上
      console.log('this.info发生变化但并没有触发组件的更新',this.info);
    },
    // 修改数组
    handleListChange() {
      this.list.push(1,2,3);
      console.log('this.list没有发生变化但是触发了子组件的更新',this.list);
    }
  }
}
</script>